import { 
  StatusBar,
  StyleSheet, 
  Text, 
  View ,
  Image,
  TextInput,
  TouchableHighlight,
  FlatList,
} from 'react-native';
import {useState,useEffect} from 'react';
import axios from 'axios';

export default function App() {
  const [isPress,setPress] = useState(0)
  const [tab,setTab] = useState('')
  const [getData,setGetData] = useState('')

  const handlePress=async(id)=>{
    setPress(id)
    console.log('id',id)
    if(id!==0){
      switch(id){
        case 1:
          setTab('good')
          break;
        case 2:
          setTab('share')
          break;
        case 3:
          setTab('ask')
          break;
        case 4:
          setTab('job')
          break;
      }
      console.log('Press tab',tab)
      try{
        console.log('axiosTabBtn',tab)
        const response = await axios.get(`https://cnodejs.org/api/v1/topics?tab=${tab}`)
        setGetData(response.data.data)
        console.log('===================================')
        // console.log('axiosTabBtn getData',getData)
 
      }catch(error){
        console.error('error',error)
      }
    }else{
      try{
        // console.log('axiosAllBtn')
        const response = await axios.get(`https://cnodejs.org/api/v1/topics`)
        setGetData(response.data.data)
        console.log('axiosAllBtn all')
        console.log('===================================')
      
      }catch(error){
        console.error('error',error)
      }
    }
  }

  const axiosAllBtn=async()=>{
    try{
      // console.log('axiosAllBtn')
      const response = await axios.get(`https://cnodejs.org/api/v1/topics`)
      setGetData(response.data.data)
      console.log('axiosAllBtn all')
      console.log('===================================')
    
    }catch(error){
      console.error('error',error)
    }
  }
  const renderList = ({item})=>{
    let timeAgo = ''
    const lastReplyTime = new Date(item.last_reply_at)
    const currentTime = new Date()
    const timeDiff = currentTime.getTime()-lastReplyTime.getTime()
    const secondDiff = Math.floor(timeDiff/1000)
    const minuteDiff = Math.floor(secondDiff/60)
    const hourDiff = Math.floor(minuteDiff / 60);
    const dayDiff = Math.floor(hourDiff / 24);
    const monthDiff = Math.floor(dayDiff/30);
    const yearDiff = Math.floor(monthDiff/12)
    if(yearDiff>0){
      timeAgo = yearDiff+'年前'
    }else if(monthDiff>0){
      timeAgo = monthDiff+'月前'
    }else if(dayDiff>0){
      timeAgo = dayDiff+'天前'
    }
    else if(hourDiff>0){
      timeAgo = hourDiff+'小时前'
    }
    else if(secondDiff>0){
      timeAgo = secondDiff+'秒前'
    }
    console.log('tab',item.tab)
    return (
      <View
        style={{
          margin:16,
        }}
      >
        <View
        style={{
          flexDirection:'row',
          alignItems:'center',
          
        }}
      >
        <Image 
          source={{uri:item.author.avatar_url.toString()}}
          defaultSource={require('./assets/icon.png')}
          style={{borderColor:'black',borderEndWidth:2,width:45,height:45,borderRadius:4,marginRight:18}}
        />
        
        <Text 
          style={{
            backgroundColor:'#E5E5E5',
            color:'#999999',
            width:35,
            height:22,
            textAlign:'center',
            lineHeight:22,
            borderRadius:4,
            marginRight:18
          }}
        >
          {item.tab === 'share'?'分享':item.tab==='ask'?'问答':item.tab==='good'?'精华':item.tab==='job'?'招聘':''}
        </Text>
        <Text>
          {item.title.length>23?item.title.slice(0,23)+'...':item.title}
        </Text>
        <Text 
          style={{
            position:'absolute',
            left:450,
            top:30,
            color:'#828282'
          }}
        >
          {timeAgo}
        </Text>
        </View>
        <View style={{flexDirection:'row',position:'relative',left:116,top:-10}}>
          <Text style={{color:'#9E78C0'}}>
            {item.reply_count}
          </Text>
          <Text style={{color:'#333333'}}>/</Text>
          <Text style={{color:'#B4B4B4'}}>
            {item.visit_count}
          </Text>
        </View>
        <View style={{ borderBottomWidth: 1, borderBottomColor: '#E5E5E5',width:800,position:'relative',top:-5 }} />
      </View>
    )
  }
  useEffect(()=>{
    axiosAllBtn()
  },[])
  return (
    <View style={styles.container}>
      <View style={styles.hearder}>
        <Image
          source={require('./assets/cnodeLogo.png')}
          style={{
            alignSelf:'center',
            marginTop:20,
            width:180,
            height:50
          }}
          />
        <TextInput
          style={{
            width:320,
            height:35,
            borderRadius:25,
            backgroundColor:'#888888',
            alignSelf:'center',
            paddingHorizontal:30,
            marginTop:10
          }}
        />
        <View style={styles.headBody}>
          <Text style={styles.headBodyItem}>首页</Text>
          <Text style={styles.headBodyItem}>未读消息</Text>
          <Text style={styles.headBodyItem}>新手入门</Text>
          <Text style={styles.headBodyItem}>API</Text>
          <Text style={styles.headBodyItem}>关于</Text>
          <Text style={styles.headBodyItem}>设置</Text>
          <Text style={styles.headBodyItem}>退出</Text>
        </View>
        <StatusBar/>
      </View>
      <View style={styles.body}>
        <View style={styles.bodyTitle}>
          <TouchableHighlight
            style={isPress==0 ? styles.buttonPressed : styles.button}
            onPress={()=>handlePress(0)}
          >
            <Text style={isPress==0 ? styles.buttonTextPressed : styles.buttonText}>全部</Text>
          </TouchableHighlight>
          <TouchableHighlight
            style={isPress==1 ? styles.buttonPressed : styles.button}
            onPress={()=>handlePress(1)}
          >
            <Text style={isPress==1 ? styles.buttonTextPressed : styles.buttonText}>精华</Text>
          </TouchableHighlight>
          <TouchableHighlight
            style={isPress==2 ? styles.buttonPressed : styles.button}
            onPress={()=>handlePress(2)}
          >
            <Text style={isPress==2 ? styles.buttonTextPressed : styles.buttonText}>分享</Text>
          </TouchableHighlight>
          <TouchableHighlight
            style={isPress==3 ? styles.buttonPressed : styles.button}
            onPress={()=>handlePress(3)}
          >
            <Text style={isPress==3 ? styles.buttonTextPressed : styles.buttonText}>问答</Text>
          </TouchableHighlight>
          <TouchableHighlight
            style={isPress==4 ? styles.buttonPressed : styles.button}
            onPress={()=>handlePress(4)}
          >
            <Text style={isPress==4 ? styles.buttonTextPressed : styles.buttonText}>招聘</Text>
          </TouchableHighlight>
          
        </View>
        <View style={styles.bodyText}>
          <FlatList
            data={getData}
            renderItem={renderList}
            keyExtractor={(item)=>item.id}
          />
        </View>
      </View >
    </View>
  );
}

// native中布局元素默认就是弹性盒

const styles = StyleSheet.create({
  container:{
    backgroundColor:'#E1E1E1'
  },
  hearder:{
    backgroundColor:'#444444',
    height:230,
    marginLeft:8,
    marginRight:8,
  },
  headBody:{
    flexDirection:'row',
    width:450,
    height:200,
    flexWrap:'wrap',
    marginLeft:48,
    marginTop:16

  },
  headBodyItem:{
    color:'#CCCCCC',
    height:50,
    fontSize:18,
    marginLeft:20,
    marginRight:20
  },
  body:{
    marginTop:26,
    backgroundColor:'#F6F6F6',
    marginLeft:8,
    marginRight:8,
    // height:50,
    borderRadius:3
  },
  bodyTitle:{
    flexDirection:'row',
    flexWrap:'wrap',
    alignSelf:'center',
    height:50
  },
  button:{
    backgroundColor:'#F6F6F6',
    width:40,
    height:22,
    borderRadius:3,
    alignItems:'center',
    marginLeft:20,
    marginRight:20,
    marginTop:15
  },
  buttonPressed:{
    backgroundColor:"#80BD01",
    width:40,
    height:22,
    borderRadius:3,
    alignItems:'center',
    marginLeft:20,
    marginRight:20,
    marginTop:15
  },
  buttonText:{
    color:'#80BD01',
    fontSize:15
  },
  buttonTextPressed:{
    color:'#F6F6F6',
    fontSize:16
  },
  bodyText:{
    backgroundColor:'#FFFFFF'
  }
});